<template>
<div>
    <h1>食谱列表页</h1>
    食谱标题
    <input type="text" v-model="dataPs.cname">
    分类
    <select v-model="dataPs.typeind">
        <option value="0">请选择</option>
        <option v-for="d in La" :value="d.tid">{{d.tname}}</option>
    </select>

    <input type="button" value="查询" @click="Show()">
    <a href="/Add">新增</a>

    <table class="table">
        <thead>
            <tr>
                <td>菜谱标题</td>
                <td>菜谱封面</td>
                <td>标签</td>
                <td>分类</td>
                <td>发布时间</td>
                <td>菜谱详情</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="d in data">
                <td>{{d.cainame}}</td>
                <td>
                    <img :src="'https://localhost:7023/'+d.img" style="width: 60px; height: 60px;">
                </td>
                <td>{{d.cBiqan}}</td>
                <td>{{d.tname}}</td>
                <td>{{moment(d.csDate).format("yyyy-MM-DD")}}</td>
                <td>{{d.cMeaages}}</td>
            </tr>
        </tbody>
    </table>
</div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import moment from 'moment';
const router=useRouter()

onMounted(()=>{
    Xia();
    Show()
})


const data=ref([{
     "id": 1,
    "cainame": "西红柿炒鸡蛋",
    "img": "/img/202507140234411.jpg",
    "cBiqan": "清淡少油",
    "typeid": 2,
    "csDate": "2025-07-14T06:34:55.878",
    "cMeaages": "味道鲜美,香气四溢",
    "tid": 2,
    "tname": "午餐"
}])


const dataPs=ref({
    cname:"",
    typeind:0
})


const Show=()=>{
    axios.get("/api/CaiPu/Show",{params:dataPs.value}).then(res=>{
        data.value=res.data
    })
}


const La=ref([{
    "tid": 0,
    "tname": ""
}])

const Xia=()=>{
    axios.get("/api/CaiPu/Xia").then(res=>{
        La.value=res.data
    })
}
        
</script>

<style lang="scss" scoped>

</style>